<template>
	<view>
		<view class="nav-bar">
			<NavBar>
				
				<view class="nav-tabBar-view" slot="left">
					<navigator open-type="navigateBack" hover-class="none" class="nav-back-view">
						<image src="/static/nav-back-icon.png" class="nav-back"></image>
					</navigator>
					<view class="nav-tabBar-item" :class="{'nav-tabBar-active': navTabBarActive == 1}"
						@click="onNavTabBar(1)">
						我的项目
					</view>
					<view class="nav-tabBar-item" :class="{'nav-tabBar-active': navTabBarActive == 2}"
						@click="onNavTabBar(2)">
						交易记录
					</view>
				</view>
				<navigator slot="right" :url="`/pagesMine/transactionSearch/transactionSearch?navTabBarActive=${navTabBarActive}`" hover-class="none"
					class="search-view">
					<image src="/static/search-icon-two.png" class="search-icon"></image>
					<view>搜索</view>
				</navigator>
			</NavBar>
			<view v-if="navTabBarActive == 1" class="tabBar-view" style="--number: 3">
				<view class="tabBar-item" :class="{'tabBar-active': !queryData.preStatus}"
					@click="onTabBarEvent('preStatus', '')">
					全部
				</view>
				<view class="tabBar-item" :class="{'tabBar-active': queryData.preStatus == '10'}"
					@click="onTabBarEvent('preStatus', '10')">
					存续中
				</view>
				<view class="tabBar-item" :class="{'tabBar-active': queryData.preStatus == '20'}"
					@click="onTabBarEvent('preStatus', '20')">
					已到期
				</view>
			</view>
			<view v-else class="tabBar-view" style="--number: 4">
				<view class="tabBar-item" :class="{'tabBar-active': !queryData.status}"
					@click="onTabBarEvent('status', '')">
					全部
				</view>
				<view class="tabBar-item" :class="{'tabBar-active': queryData.status == '10'}"
					@click="onTabBarEvent('status', '10')">
					审核中
				</view>
				<view class="tabBar-item" :class="{'tabBar-active': queryData.status == '20'}"
					@click="onTabBarEvent('status', '20')">
					交易成功
				</view>
				<view class="tabBar-item" :class="{'tabBar-active': queryData.status == '30'}"
					@click="onTabBarEvent('status', '30')">
					交易失败
				</view>
			</view>
		</view>
		<block v-if="navTabBarActive == 1">
			<TransactionProject v-for="(item, index) in dataList" :key="index" :item="item"></TransactionProject>
			<Empty v-if="!dataList.length"></Empty>
		</block>
		<block v-else>
			<TransactionRecord v-for="(item, index) in recordList" :key="index"  :item="item"></TransactionRecord>
			<Empty v-if="!recordList.length"></Empty>
		</block>
		<view style="height: 160upx;"></view>
		<FloatTopButton></FloatTopButton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTabBarActive: 1,
				dataList: [], // 项目列表
				recordList: [], // 交易记录列表
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
					projectName: '', // 项目名称
					preStatus: '', // 项目运转状态 10存续中 20已到期
					status: '', // 订单状态 10受理中 20交易成功 30交易失败
				}
			}
		},
		onLoad() {
			this.getProjectMyPage()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
		},
		methods: {
			/**
			 * 我的项目列表
			 */
			async getProjectMyPage() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectMyPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			/**
			 * 交易记录列表
			 */
			async getProjectRecordsPage() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectRecordsPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.recordList = this.queryData.pageNo == 1 ? list : this.recordList.concat(list)
			},
			onTabBarEvent(key, value) {
				if (this.queryData[key] == value) return
				this.queryData[key] = value
				this.queryData.pageNo = 1
				this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
			},
			onNavTabBar(event) {
				if (this.navTabBarActive == event) return
				this.navTabBarActive = event
				this.queryData.preStatus = ''
				this.queryData.status = ''
				this.queryData.pageNo = 1
				this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-tabBar-view {
			@extend .row;
			height: 100%;
			.nav-back-view {
				@extend .column;
				margin-right: 29upx;
			
				.nav-back {
					width: 43upx;
					height: 43upx;
				}
			}

			.nav-tabBar-item {
				@extend .column;
				height: 100%;
				font-size: 25rpx;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
				transition: all 0.3s;

				&:before {
					content: "";
					width: 47rpx;
					height: 2px;
					position: absolute;
					bottom: -13upx;
					transition: all 0.3s;
				}
			}

			.nav-tabBar-item+.nav-tabBar-item {
				margin-left: 40upx;
			}



			.nav-tabBar-active {
				font-size: 33rpx;
				font-weight: 600;
				color: #FFFFFF;

				&:before {
					background: white;
				}
			}
		}

		.tabBar-view {
			width: 100%;
			height: 76rpx;
			background: #FFFFFF;
			@extend .row-between;

			.tabBar-item {
				width: calc(100% / var(--number));
				height: 100%;
				@extend .column;
				font-size: 27rpx;
				font-weight: 400;
				color: #2C1101;
			}

			.tabBar-active {
				color: #FF2615;
			}
		}

		.search-view {
			@extend .column;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.search-icon {
				width: 33upx;
				height: 33upx;
			}
		}
	}

	
</style>